<template>
<section class="content-box">
  <!--采购付款单-->
  <div v-if="isshowList">
    <el-col :span="24" class="SuppC-toolbar">
      <el-form class="title">
        <div class="cover">
          <h2>采购付款单</h2>
          <el-button @click="handlePay()" size="small" class="el-icon-plus">&nbsp;新建</el-button>
          <el-button @click="Search()" size="small" class="el-icon-search">&nbsp;查询</el-button>
        </div>
        <el-form-item class="cover">
          <el-popover
            ref="poverMerge"
            placement="bottom"
            width="100"
            trigger="hover"
            :visible-arrow="false">
            <div class="item-img" @click="handleExport()" style="display:block;float:none">
              <img class="SuppC-common-icon" src="../../../../static/content/images/Common/common-export.png" alt=""/>
              <span>导出</span>
            </div>
          </el-popover>
          <div class="list-img" v-popover:poverMerge>
            <img class="SuppC-common-icon" src="../../../../static/content/images/Common/common-more.png" alt=""/>
          </div>
        </el-form-item>
      </el-form>
    </el-col>
    <!--列表-->
    <el-table v-if="dataList" 
    :data="dataList" 
    ref="multipleTable"
    @row-dblclick="handlePay" 
    tooltip-effect="dark" 
    @selection-change="handleSelectionList" 
    highlight-current-row 
    v-loading="loading" 
    element-loading-text="正在加载中" 
    style="width: 100%">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column 
        prop="A" 
        label="单据日期" 
        width="150"
        sortable>
        </el-table-column>
        <el-table-column 
        prop="B" 
        label="单据编号" 
        width="150"
        sortable
        show-overflow-tooltip>
        </el-table-column>
        <el-table-column 
        prop="C" 
        label="单据名称" 
        width="150"
        sortable
        show-overflow-tooltip>
        </el-table-column>
        <el-table-column 
        prop="D" 
        label="付款金额" 
        width="150">
        </el-table-column>
        <el-table-column 
        prop="E" 
        label="凭证编号"
        width="150">
        </el-table-column>
        <el-table-column 
        prop="F" 
        label="供应商" 
        show-overflow-tooltip>
        </el-table-column>
        <el-table-column 
        prop="G" 
        label="状态" 
        width="120">
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
                <div class="list-img" @click="repeal(scope.$index, scope.row)">
                  <img class="common-icon" src="../../../../static/content/images/Common/common-repeal.png" alt=""/>
                </div>
                <div class="list-img" @click="checkflowRow(scope.$index, scope.row)">
                  <img class="common-icon" src="../../../../static/content/images/Common/common-flow.png" alt=""/>
                </div>
                <div class="list-img" @click="handleDel(scope.$index, scope.row)">
                  <img class="common-icon" src="../../../../static/content/images/Common/common-list-dele.png" alt=""/>
                </div>
            </template>
          </el-table-column>
    </el-table>
    <!--查询-->
    <el-dialog title="查询" :visible.sync="dialogSearchVisible" :modal-append-to-body="false" size="tiny">
          <el-form :model="Searchform" class="Searform">
            <el-form-item label="单据日期" :label-width="formLabelWidth">
              <el-date-picker type="date" v-model="Searchform.A" style="width:120px;" placeholder="选择日期"></el-date-picker>
              至&nbsp;<el-date-picker type="date" v-model="Searchform.B" style="width:120px;" placeholder="选择日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="付款金额" :label-width="formLabelWidth">
              <el-input v-model.number.trim="Searchform.C" auto-complete="off" style="width:120px;"></el-input>
              至&nbsp;<el-input v-model.number.trim="Searchform.D" auto-complete="off" style="width:120px;"></el-input>
            </el-form-item>
            <el-form-item label="单据名称" :label-width="formLabelWidth">
              <el-select v-model="Searchform.J" style="width:262px;" placeholder="请选择">
                <el-option value="" label="全部">全部</el-option>
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="单据编号" :label-width="formLabelWidth">
              <el-select v-model="Searchform.J" style="width:262px;" placeholder="请选择">
                <el-option value="" label="全部">全部</el-option>
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="供应商" :label-width="formLabelWidth">
              <el-select v-model="Searchform.J" style="width:262px;" placeholder="请选择">
                <el-option value="" label="全部">全部</el-option>
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="状态" :label-width="formLabelWidth">
              <el-select v-model="Searchform.J" style="width:262px;" placeholder="请选择">
                <el-option value="" label="全部">全部</el-option>
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer cover">
            <el-button size="small" @click="Reset">重 置</el-button>
            <el-button size="small" @click="Query">确 定</el-button>
          </div>
    </el-dialog>
  </div>
  <div v-if="isshowPay">
    <!-- 导航条 -->
		<div class="flex-top">
      <div>
        <i class="el-icon-arrow-left back" @click="ToBack"></i>
        <span style="font-size:20px;vertical-align:middle;margin:0 10px;">
          采购付款单{{isAdPayValue}}
        </span>
      </div>
      <!-- 右侧 -->
      <div class="flex">
        <span class="wrapper cover">
          <div style="margin:10px;overflow:hidden;">
            <div class="list-img" @click="Save()">
              <el-tooltip class="item" effect="dark" content="保存" placement="bottom">
                <img class="common-button-group" src="../../../../static/content/images/Common/common-save.png" alt=""/>
              </el-tooltip>
            </div>
            <div class="list-img" @click="Submit()">
              <el-tooltip class="item" effect="dark" content="提交" placement="bottom">
                <img class="common-button-group" src="../../../../static/content/images/Common/common-submit.png" alt=""/>
              </el-tooltip>
            </div>
          </div>
        </span>
      </div>
    </div>
    <div style="margin-top:20px;" v-show="Advance==true">
          是否预付款&#12288;
          <el-switch
          v-model="isAdPay"
          on-color="#13ce66"
          off-color="#ff4949">
          </el-switch>
    </div>
    <main class="main" style="width:1120px;">
          <div class="main-left">
            <div v-if="DocNo">
              <h3>单号</h3>
              <strong>{{DocNo}}</strong>
            </div>
            <div>
              <h3>日期</h3>
              <div class="flex">
                <el-date-picker type="date" v-model="DocDate" placeholder="选择日期">
                </el-date-picker>
              </div>
            </div>
            <div class="SuppC-Money">
              <h3>付款金额</h3>
              <el-input type="Number" v-model='name1' placeholder="请录入付款金额"></el-input>
              <i class="icon iconfont icon-rmb"></i>
            </div>
          </div>
          <div class="main-right">
            <div class="left-form">
              <el-form label-width="70px" class="form-content">
                <el-row>
                  <el-col :span="span">
                    <el-form-item label="供应商">
                      <el-select 
                      v-model="name1"
                      ref="select"
                      filterable 
                      placeholder="请选择" 
                      style="width:200px;">
                        <el-option
                            v-for="item in Names"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" v-if="isAdPay==true">
                     <el-form-item label="采购订单">
                      <el-input v-model="name1" placeholder="请选择采购订单" style="width:200px;" icon="search" @focus="PurOrderPay()"></el-input>
                     </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="业务描述">
                      <el-input
                        type="textarea"
                        style="width:615px;"
                        :rows="5"
                        placeholder="请输入内容"
                        v-model="name1">
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
    </main>
    <div class="border-solid"></div>
    <div class="budget cover" style="width:1120px;" v-if="isAdPay==false">
          <h3>请录入付款明细</h3>
          <div class="SuppC-Nas-itemRight">
            <el-popover
              ref="popover1"
              placement="top-start"
              width="200"
              trigger="click">
              <h3 class="Suppc-help-titleRed">没有找到对应的付款明细？</h3>
              <ul class="Suppc-help-ul">
                <el-popover
                  ref="popover1"
                  v-model="pop1"
                  placement="right"
                  width="200"
                  trigger="click">
                  <h3 class="Suppc-help-titleGay">物品没入仓</h3>
                  <hr style="margin-top:15px;">
                  <ul class="Suppc-help-ul">
                    <li @click="NewsIn()">申请入仓</li>
                    <li @click="NewsAdvance()">申请预付</li>
                  </ul>
                </el-popover>
                <li v-popover:popover1 @click="popClick(1)">物品没入仓</li>
                <el-popover
                  ref="popover2"
                  v-model="pop2"
                  placement="right"
                  width="200"
                  trigger="click">
                  <h3 class="Suppc-help-titleGay">结算方式为发票结算,但未收到发票</h3>
                  <hr style="margin-top:15px;">
                  <ul class="Suppc-help-ul">
                    <li @click="NewsInvoice()">新建发票</li>
                    <li @click="NewsAdvance()">申请预付</li>
                  </ul>
                </el-popover>
                <li v-popover:popover2 @click="popClick(2)">结算方式为发票结算，但未收到发票</li>
                <li @click="SupplierError()">供应商选错</li>
              </ul>
            </el-popover>
            <i class="icon iconfont icon-iconfontquestion" v-popover:popover1></i>
            <span style="font-size:14px;line-height:1.5">帮助</span>
          </div>  
          <table class="InHideTable" border="1" style="width:1080px;">
            <tr>
              <th style="width:150px;">单据编码</th>
              <th style="width:150px;">单据名称</th>
              <th style="width:120px;">单据日期</th>
              <th style="width:120px;">应付总额</th>
              <th style="width:120px;">已付总额</th>
              <th style="width:120px;">剩余未付</th>
              <th style="width:120px;" class="font-green">本次付款</th>
            </tr>
            <tr v-for="(item,index) in PayDetail" :key="index">
              <td>
                {{item.A}}
              </td>
              <td>
                {{item.B}}
              </td>
              <td>
                {{item.C}}
              </td>
              <td>
                {{item.D}}
              </td>
              <td>
                {{item.E}}
              </td>
              <td>
                {{item.F}}
              </td>
              <td>
                <el-input :ref="index * 1 + 1" @keyup.enter.native="jump(index * 1 + 1)" placeholder="请录入" type="text" class="input-Focus white" v-model="item.G"></el-input>
              </td>
            </tr>
            <tr>
              <td colspan="3">合计</td>
              <td>{{copeWithCount}}</td><!--应付总额-->
              <td>{{paidCount}}</td><!--已付总额-->
              <td>{{surplusCount}}</td><!--剩余未付-->
              <td>{{thisCount}}</td><!--本次付款-->
            </tr>
          </table>
        </div>
        <div class="budget cover" style="width:1120px;" v-if="isAdPay==true">
          <h3>订单明细</h3>
          <table class="InHideTable" border="1" style="width:1080px;">
            <tr>
              <th style="width:180px;">存货编码</th>
              <th style="width:180px;">存货名称</th>
              <th style="width:180px;">采购数量</th>
              <th style="width:120px;">采购单价</th>
              <th style="width:120px;">采购金额</th>
            </tr>
            <tr v-for="(item,index) in OrderDetail" :key="index">
              <td>{{item.A}}</td>
              <td>{{item.B}}</td>
              <td>{{item.C}}</td>
              <td>{{item.D}}</td>
              <td>{{item.E}}</td>
            </tr>
            <tr>
              <td colspan="4">合计</td>
              <td>{{purPrice}}</td><!--采购金额-->
            </tr>
          </table>
    </div>
  </div>
  <!-- 销售订单弹窗 -->
  <el-dialog title="采购订单" :visible.sync="PurOrderPayDialog" :modal-append-to-body="false">
    <el-input
      placeholder="请输入采购订单号"
      style="width:200px;margin-bottom:10px;"
      icon="search"
      v-model="name1"
      :on-icon-click="handleIconClick">
    </el-input>
    <el-table 
      border
      tooltip-effect="dark"
      highlight-current-row
      @current-change="handleCurrentChange"
      :data="PurchaOrderPayList">
      <!-- <el-table-column type="selection" width="55"></el-table-column> -->
      <el-table-column property="A" label="单据日期" width="120"></el-table-column>
      <el-table-column property="B" label="单据编号" width="120"></el-table-column>
      <el-table-column property="C" label="单据名称" width="120"></el-table-column>
      <el-table-column property="D" label="订单金额" width="100" show-overflow-tooltip></el-table-column>
      <el-table-column property="E" label="结算方式" show-overflow-tooltip></el-table-column>
      <el-table-column property="F" label="业务描述" show-overflow-tooltip></el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer cover">
      <el-button size="small" @click="PurOrderPayDialog = false">取 消</el-button>
      <el-button size="small" @click="Determine">确 定</el-button>
    </div>
  </el-dialog>
  <!--流程图-->
  <el-dialog title="流程执行情况" :visible.sync="checkflowRowVisible" :modal-append-to-body="false" align="center">
    <el-table :data="docRowView" min-height="300" header-align="center" v-loading="docViewloading" element-loading-text="拼命刷新中...">
      <el-table-column property="PlanUser" label="操作人"></el-table-column>
      <el-table-column property="StepName" label="步骤名称"></el-table-column>
      <el-table-column property="OpDate" label="时间"></el-table-column>
      <el-table-column property="OpRemark" label="审批流程"></el-table-column>
    </el-table>
  </el-dialog>
</section>
</template>
<script>
export default {
  name: "PaymentOrders",
  data() {
    return {
      loading: false,
      isshowList: true,
      formLabelWidth: '70px',
      docViewloading: false, //流程图
      dialogSearchVisible: false,
      isshowPay: false,
      checkflowRowVisible:false,
      isAdPay:false,
      DocNo:'KDC180091201',
      name1:'',
      DocDate:'',
      Advance:false,
      PurOrderPayDialog:false,//采购订单
      PurchaOrderPayList:[{
        A:'2018-01-30',
        B:'FG18010005',
        C:'非BOM采购',
        D:120,
        E:'0%',
        F:'发票结算',
        G:'广州市品冠电子有限公司'
      },{
        A:'2018-01-30',
        B:'FG18010005',
        C:'非BOM采购',
        D:120,
        E:'0%',
        F:'发票结算',
        G:'广州市品冠电子有限公司'
      },{
        A:'2018-01-30',
        B:'FG18010005',
        C:'非BOM采购',
        D:120,
        E:'0%',
        F:'发票结算',
        G:'广州市品冠电子有限公司'
      }],
      Names:[{
        label:'1',
        value:"1"
      },{
        label:'1',
        value:"2"
      }],
      options: [{
        value: '1',
        label: '黄金糕'
      }, {
        value: '2',
        label: '双皮奶'
      }],
      docRowView:[{
          PlanUser:"杨晓莉",
          StepName:"提交",
          OpDate:"2018/1/25 16:25:55",
          OpRemark:""
      },{
          PlanUser:"杨晓莉",
          StepName:"提交",
          OpDate:"2018/1/25 16:25:55",
          OpRemark:""
      },{
          PlanUser:"杨晓莉",
          StepName:"提交",
          OpDate:"2018/1/25 16:25:55",
          OpRemark:""
      },{
          PlanUser:"杨晓莉",
          StepName:"提交",
          OpDate:"2018/1/25 16:25:55",
          OpRemark:""
      }],
      currentRow:null,
      PayDetail:[{
            A:'CH18010005',
            B:'采货进货单',
            C:'2018-1-10',
            D:500,
            E:'',
            F:500,
            G:''
          },{
            A:'YF18010006',
            B:'预付款',
            C:'2018-1-10',
            D:350,
            E:100,
            F:500,
            G:''
      }],
      OrderDetail:[
        {
          A:"20011",
          B:"恒大冰泉",
          C:500,
          D:5,
          E:2500
        },
        {
          A:"20011",
          B:"恒大冰泉",
          C:500,
          D:5,
          E:2500
        },
        {
          A:"20011",
          B:"恒大冰泉",
          C:500,
          D:5,
          E:2500
        }
      ],
      Searchform: {
        A: '',
        B: '',
        C: '',
        D: '',
        E: '',
        F: '',
        G: '',
        H: '',
        I: '',
        J: '',
      },
      pop1:false,
      pop2:false,
      multipleSelect:[],
      dataList: [{
        A: '2016-05-03',
        B: 'YF18030000000008',
        C: '预付款',
        D: 15000.00,
        E: 'PZ1803006',
        F: '广州市品冠电子有限公司',
        G: '待审核',
      }, {
        A: '2016-05-03',
        B: 'YF18030000000008',
        C: '预付款',
        D: 15000.00,
        E: 'PZ1803006',
        F: '广州市品冠电子有限公司',
        G: '待审核',
      }, {
        A: '2016-05-03',
        B: 'YF18030000000008',
        C: '预付款',
        D: 15000.00,
        E: 'PZ1803006',
        F: '广州市品冠电子有限公司',
        G: '待审核',
      }, {
        A: '2016-05-03',
        B: 'YF18030000000008',
        C: '预付款',
        D: 15000.00,
        E: 'PZ1803006',
        F: '广州市品冠电子有限公司',
        G: '待审核',
      }, {
        A: '2016-05-03',
        B: 'YF18030000000008',
        C: '预付款',
        D: 15000.00,
        E: 'PZ1803006',
        F: '广州市品冠电子有限公司',
        G: '待审核',
      }, {
        A: '2016-05-03',
        B: 'YF18030000000008',
        C: '预付款',
        D: 15000.00,
        E: 'PZ1803006',
        F: '广州市品冠电子有限公司',
        G: '待审核',
      }],
    }
  },
  methods: {
    Search() {
      this.dialogSearchVisible = true;
    },
    async Query() {
      this.dialogSearchVisible = false;
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    handleIconClick() {},
    handlePay(index,row){
      console.log(index,'index');
      console.log(row,'row');
      this.isshowPay = true;
      this.isshowList = false;
      this.Advance = true;
      this.isAdPay = false;
      this.$router.push({
        path:'/PurchasePayment',
        query:{
          News:true
        }
      })
      if(this.isUndefined(row)){
        console.log('新建页面');
      }else{
        console.log('编辑页面');
      }
    },
    //采购订单窗口
    PurOrderPay(){
      this.PurOrderPayDialog = true;
    },
    //保存
    addSave(){},
    //提交
    addSubmit(){},
    Reset() {
      this.Searchform = {
        A: '',
        B: '',
        C: '',
        D: '',
        E: '',
        F: '',
        G: '',
        H: '',
        I: '',
        J: '',
      }
    },
    //帮助=》Pop浮窗切换显示隐藏
    popClick(e){
      if(e===1){
        this.pop1=true
        this.pop2=false
      }else{
        this.pop1=false
        this.pop2=true
      }
    },
    jump(index) {
      if (this.$refs[index + 1]) {
        this.$refs[index + 1][0].$el.getElementsByTagName('input')[0].focus();
      }
    },
    //申请入仓
    NewsIn(){
      this.$router.push({
        path:'/PurchaseIn',
        query:{
          InYes:true,
          generate:true
        }
      })
    },
    //新建发票
    NewsInvoice(){
      this.$router.push({
        path:'/PurchaseInvoice',
        query:{
          News:true
        }
      })
      this.isshowInvoice = true;
      this.isshowList = false;
      this.isshowPay = false
    },
    //申请预付
    NewsAdvance(){
      this.isAdPay = true;
      this.$router.push({
        path:'/PurchasePayment',
        query:{
          isAdPay:true
        }
      })
    },
    SupplierError(){
      console.log(this.$refs['select'],"this.$refs['select']");
      this.$refs['select'].visible = true;
    },
    PurchaseOrderQuery(){
      this.PurchaOrderDialog = true;
    },
    //销售订单确定按钮
    Determine() {
      let arr = "";
      this.multipleSelect.map(item => {
        arr = item.B;
      });
      console.log(arr, "arr");
      this.PurOrderPayDialog = false;
    },
    ToBack(){
      this.isshowList = true,
      this.isshowPay = false,
      this.$router.push({
        path:'/PurchasePayment'
      })
    },
    //流程图
    checkflowRow(){
      this.checkflowRowVisible = true;
    },
    //多选
    handleSelectionList(val) {
      let arr = [];
      this.multipleSelection = val;
      this.multipleSelection.forEach((item, index) => {
        console.log(item.date, 'item');
        arr.push(item.date)
      })
      const arrjoin = arr.join();
      console.log(arrjoin);
    },
  },
  watch:{
    isAdPay:function(val){
      console.log(val,'isAdPay');
      if(val){
        this.Advance = false
      }
    }
  },
  computed:{
    //订单明细 采购金额
    purPrice(){
      let sum = 0;
      this.OrderDetail.forEach(item=>{
        sum+=Number(item.E);
      })
      return sum;
    },
    //采购付款单 应付总额
    copeWithCount(){
      let sum = 0;
      this.PayDetail.forEach(item=>{
        sum+=Number(item.D);
      })
      return sum;
    },
    //采购付款单 已付总额
    paidCount(){
          let sum = 0;
          this.PayDetail.forEach(item=>{
            sum+=Number(item.E);
          })
          return sum;
    },
    //采购付款单 剩余未付
    surplusCount(){
          let sum = 0;
          this.PayDetail.forEach(item=>{
            sum+=Number(item.F);
          })
          return sum;
    },
    //采购付款单 本次付款
    thisCount(){
          let sum = 0;
          this.PayDetail.forEach(item=>{
            sum+=Number(item.G);
          })
          return sum;
    },
    span(){
      if(this.isAdPay == true){
        return 12;
      }else{
        return 24;
      }
    },
    isAdPayValue(){
      if(this.isAdPay == true){
        return '—预付款'
      }
    },
  },
  created(){
    const query = this.$route.query;
    console.log(query,'query');
    if(query.News && (query.News===true || query.News === 'true' )){
      this.isshowPay = true;
      this.isshowList = false;
      this.Advance = true;
      this.isAdPay = false;
    }else if(query && query.isAdPay===true || query.isAdPay === 'true'){
      this.isshowPay = true;
      this.isshowList = false;
      this.Advance = false;
      this.isAdPay = true;
      console.log(this.Advance,'this.Advance')
      console.log(this.isAdPay,'this.isAdPay')
    }else if(query && (query.isAdPay===false || query.isAdPay === 'false')){
      this.isshowPay = true;
      this.isshowList = false;
      this.Advance = false;
      this.isAdPay = false;
    }
  }
}
</script>
<style scoped lang="scss">
@import "../../../common/css/index.css";
.toolbar h2 {
  line-height: 36px;
  margin: 0 10px 0 0;
}

.toolbar .title {
  display: inline-flex;
  line-height: 5px;
  width: 100%;
  justify-content: space-between;
}

.main-left {
  padding: 1vw 1vw;
}

.main-left h3 {
  height: 20px;
  line-height: 20px;
  margin-bottom: 10px;
}

.left-form,
.right-form {
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-table .cell {
  padding: 0 0;
}

.common-icon {
  line-height: 24px;
  float: none
}
</style>